<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="muban-css/muban-index.css">
    <script src="jquery/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="head" >
    <div class="row" style="background-color: rebeccapurple;">
        <div  class="col-md-7" style="background-color: #292b2c;"></div>
        <div class="col-md-5" style="background-color: #843534;"></div>
    </div>
</div>
<div id="middle" >
    <div style="text-align: center;margin: auto">
    <!--商城图标和搜索以及购物车-->
        <div id="img-search-shoppingcat" style="height: 100px;width: 100%;background-color: wheat"></div>
    <!--导航栏-->
        <div style="background-color: black">
        <div class="row" style="width: 1200px;text-align: center;margin: auto">
            <div class="col-md-3" style="background-color: #843534;height:25px; ">
                <a href="#"  data-toggle="dropdown" style="text-decoration: none;display: inline-block;width: 100%;height: 100%;">全部商品分类</a>
                <ul id="muban-nav" class="dropdown-menu" style="width: 100%;">
                    <li style="height: 30px;"><a href="#">jmeter</a></li>
                    <li style="height: 30px;"><a href="#">EJB</a></li>
                    <li style="height: 30px;"><a href="#">Jasper Report</a></li>
                    <li style="height: 30px;"><a href="#">分离的链接</a></li>
                    <li style="height: 30px;"><a href="#">另一个分离的链接</a></li>
                </ul>
            </div>
            <div class="col-md-9" style="background-color: #2aabd2;height: 25px;">
                <ul style="list-style:none;margin: 0px;padding: 0px;width: auto; width: 100%;">
                    <li style="float: left;width: 20%;"><a href="#">SVN</a></li>
                    <li style="float: left;width: 20%;"><a href="#">SVN</a></li>
                    <li style="float: left;width: 20%;"><a href="#">SVN</a></li>
                    <li style="float: left;width: 20%;"><a href="#">SVN</a></li>
                    <li style="float: left;width: 20%;"><a href="#">SVN</a></li>
                </ul>
            </div>
        </div>
        </div>
    </div>
    <!--banner大图片显示-->
    <div id="banner" style="background-color: white;"></div>
    <div id="pro-middle" style="">
        <!--导购信息-->
        <div style="background-color: #2aabd2"></div>
        <!--四个产品展示-->
        <ul>
            <li style="background-color: black"></li>
            <li style="background-color: #8a6d3b"></li>
            <li style="background-color: #4b5257"></li>
            <li style="background-color: #5bc0de"></li>
        </ul>
        <!--隔离带-->
        <div id="geline"></div>
    </div>

</div>
<div id="bottom" >底部</div>
</body>
</html>